<template>
  <div>
    <div class="container">
      <div class="handle-box">
<!--        <el-input v-model="query.userId" placeholder="操作人" class="handle-input mr10"></el-input>-->
        <el-input v-model="query.content" placeholder="操作内容" class="handle-input mr10"></el-input>
        <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" :icon="Search" @click="resetSearch">重置</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>
<!--        <el-table-column prop="userId" label="操作人id" :min-width="120" :show-overflow-tooltip="true" align="center"></el-table-column>-->
        <el-table-column prop="content" label="操作内容" :min-width="300" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createTime" label="操作时间" :min-width="160" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageNum"
            :page-size="query.pageSize"
            :total="query.total"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!--用户选择器-->
    <WebUserSelector ref="outletManagerDialogRef" @selectedCourier="selectedOutletManager"></WebUserSelector>
  </div>
</template>

<script setup lang="ts" name="basetable">
import {ref, reactive, nextTick} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getLogListApi} from '../api/index';
import AddressCascadeSelector from '../components/AddressCascadeSelector.vue'
import WebUserSelector from '../components/WebUserSelector.vue'

const query = reactive({
  userId: '',
  content:'',
  pageNum: 1,
  pageSize: 10,
  total: 0
});
const loading = ref(false);
const tableData = ref([]);

// 获取表格数据
const getData = async () => {
  loading.value = true;
  const res = await getLogListApi(query);
  if (res) {
    tableData.value = res.data.content;
    query.total = res.data.count;
  }
  loading.value = false;
};
getData();

// 查询操作
const handleSearch = () => {
  query.pageNum = 1;
  getData();
};
// 重置操作
const resetSearch = () => {
  query.userId = '';
  query.content = '';
  getData();
};
// 分页导航
const handlePageChange = (val: number) => {
  query.pageNum = val;
  getData();
};

// // 删除操作
// const handleDelete = (id: number) => {
//   // 二次确认删除
//   ElMessageBox.confirm('确定要删除吗？', '提示', {
//     type: 'warning'
//   }).then(async () => {
//     const res = await deleteOutletApi(id);
//     if (res) {
//       ElMessage.success('删除成功');
//       await getData();
//     }
//   }).catch(() => {});
// };
//
// // 表格编辑时弹窗和保存
// const editVisible = ref(false);
// let editForm = reactive({
//   name: "",
//   status: "",
//   phone: "",
//   province: "",
//   city: "",
//   town: "",
//   detailAddress: "",
//   remark: ""
// });
//
// const addressSelectorRef = ref();
// const handleEdit = (row: any) => {
//   Object.keys(row).map((key: any) => editForm[key] = row[key]);
//   editVisible.value = true;
//   nextTick(() => {
//     addressSelectorRef.value.initShow(row.province, row.city, row.town);
//   });
// };
// const saveEdit = async () => {
//   const res = await updateOutletApi(editForm);
//   if (res) {
//     editVisible.value = false;
//     await getData();
//   }
// };
//
// // 表格新增时弹窗和保存
// const addVisible = ref(false);
// let addForm = reactive({
//   name: "",
//   status: "",
//   phone: "",
//   province: "",
//   city: "",
//   town: "",
//   detailAddress: "",
//   remark: "",
//   managerId: "",
//   managerPhone: "",
//   managerName: ""
// });
// const handleAdd = () => {
//   Object.keys(addForm).map((key: string) => addForm[key] = "");
//   addVisible.value = true;
// };
// const saveAdd = async () => {
//   const res = await addOutletApi(addForm);
//   if (res) {
//     addVisible.value = false;
//     await getData();
//   }
// };



const outletManagerDialogRef = ref();
// 0-新增，1-编辑
const outletManagerType = ref();
const handleSelectedOutletManager = (type: number) => {
  outletManagerDialogRef.value.changeShowByOutletManager(true);
  outletManagerType.value = type;
};


</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
